Implement a method of enclosing multiple elements when there are extra ones selected. #1354
Conversation
|
Oh, I also added a filter to the |
I thought that does not happen anymore. Do you have an example expression for this? |
Well, |
|
That is on the current develop branch of SRE. |
There was a problem hiding this comment.
This works well with one exception: In the SVG renderer, if there are multiple parts, the fill attribute is only reset/removed on the first of the nodes. The other's retain it.
This does not show up in black on white, however, it shows up, for example, when you put the page into dark mode. Then some elements will remain black after the highlighter has been removed.
The solution is probably to retain the parts in the info structure.
|
PS: Not sure if this would be a blocker for 4.0.1 |
That is not necessary. Each part already has its own |
… so the cached array is not modified when the enclosure is added
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #1354 +/- ##
===========================================
- Coverage 86.72% 86.66% -0.06%
===========================================
Files 337 338 +1
Lines 84145 84376 +231
Branches 3140 4777 +1637
===========================================
+ Hits 72971 73125 +154
- Misses 11174 11228 +54
- Partials 0 23 +23 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
2 participants
This PR implements a method for enclosing multiple elements when extra ones are included rather than having multiple outlines and backgrounds.
This works by collecting the split nodes into groups by which line they are in (when there are line breaks) and enclosing those collections separately. This is done by inserting a new, temporary node that represents the bounding box of all the elements in each collection. Most of the work is done in the highlighter through the new method
encloseNodes(), which does the separation into collections by line, computes the bounding box in each line, and creates and inserts the new node for that bounding box.How that bounding box node is created and inserted differs in the CHTML and SVG highlighters, and that is handled in the new
createEnclosure()method. For HTML elements, and newmjx-bboxelement is created with the proper size and offsets, and is prepended to themjx-container. For SVG, a rect is created and inserted before the first selected element in each line. The creation of the SVG rectangles is abstracted into acreateRectangle()method that is used for both the enclosure rectangle as well as the individual background rectangles for the highlighter. If an enclosing rectangle is created, it is used for highlighting as well, so no need to create a highlight rectangle as well.Selected nodes that are enclosed get marked with a
data-mjx-enclosedattribute and their backgrounds are not colored and they don't get themjx-selectedattribute (since the enclosure will get the background and outline).The unhighlight methods are modified to remove any added enclosures when they become unselected.
The CSS for the CHTML outline is moved from the explorer.ts to the chtml.ts file, to correspond to the CSS in the svg.ts file, though I suppose the CSS from svg.ts could be moved to explorer.ts instead, if that seems better. I also added 'data-' to the
sre-highlightattributes, since they are not valid on SVG elements.